<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white; padding:20px">
      <el-form-item label="日期" prop="startDate">
        <el-date-picker v-model="formList.startDate" clearable type="date" placeholder="选择日期" style="width:200px" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
      </el-form-item>
      <el-form-item label="出发站" prop="startStationId">
        <el-select v-model="formList.startStationId" filterable clearable placeholder="请选择班次">
          <el-option v-for="item in stationList" :key="item.station_name" :label="item.station_name" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班次" prop="runBusId">
        <el-select v-model="formList.busNum" filterable clearable placeholder="请选择班次">
          <el-option v-for="item in vehicleList" :key="item.busNum" :label="item.busNum" :value="item.busNum"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客票号" prop="startTicketNum">
        <el-input v-model="formList.startTicketNum" placeholder="客票号" />
      </el-form-item>
      <el-form-item label="证件号" prop="cardId">
        <el-input v-model="formList.cardId" placeholder="证件号" />
      </el-form-item>
      <el-form-item label="姓名" prop="passengerName" class="Dh_label">
        <el-input v-model="ticketInfo.passengerName" :disabled="true" />
      </el-form-item>
      <el-form-item label="张数" prop="seatNum" class="Dh_label">
        <el-input value="1" :disabled="true" />
      </el-form-item>
      <el-form-item label="票价" prop="ticketPrice" class="Dh_labels">
        <el-input v-model="ticketInfo.ticketPrice" :disabled="true" />
      </el-form-item>
      <el-form-item label="退款金额" prop="refundMoney" class="Dh_labels">
        <el-input v-model="ticketInfo.refundMoney" :disabled="true" />
      </el-form-item>
      <nm-button type="primary" @click="getData" text="查询" style="margin-left:20px"></nm-button>
      <nm-button type="primary" @click="sendData" text="退票" style="margin-left:20px"></nm-button>
    </el-form>
    <div class="Dh_table">
      <el-table @select="checkRow" @select-all="checkAll" highlight-current-row tooltip-effect="dark" :max-height="height" @current-change="handleCurrentChange" ref="topictable" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;">
        <el-table-column label="" width="40">
          <template slot-scope="scope">
            <el-radio :label="scope.$index" v-model="radio" @change.native="currentRow(scope.row)" style="color: #fff;padding-left: 5px;"></el-radio>
          </template>
        </el-table-column>

        <el-table-column prop="paperTicketNum" label="客票号"> </el-table-column>
        <el-table-column prop="busDate" label="日期">
          <template slot-scope="scope">
            <span>{{ getDateFun(scope.row.busDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="时间"> </el-table-column>
        <el-table-column prop="startStationName" label="上车站"> </el-table-column>
        <el-table-column prop="busNum" label="班次"> </el-table-column>
        <el-table-column prop="seatNum" label="座位"> </el-table-column>
        <el-table-column prop="endStationName" label="到达站"> </el-table-column>
        <el-table-column prop="ticketPrice" label="票价"> </el-table-column>
        <el-table-column prop="refundFeeRate" label="退票比例"> </el-table-column>
        <el-table-column prop="refundFee" label="手续费"> </el-table-column>
        <el-table-column prop="seller" label="售票员"> </el-table-column>
        <el-table-column prop="payType" label="支付方式">
          <template slot-scope="scope">
            <span>{{ scope.row.payType == 1 ? '现金' : scope.row.payType == 2 ? '扫码' : scope.row.payType == 3 ? '被扫' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ticketStatus" label="客票状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.ticketStatus == 0
                ? '锁票'
                : scope.row.ticketStatus == 1
                ? '已售'
                : scope.row.ticketStatus == 2
                ? '已废'
                : scope.row.ticketStatus == 3
                ? '已取'
                : scope.row.ticketStatus == 4
                ? '已改签'
                : scope.row.ticketStatus == 5
                ? '已退票'
                : '已检票'
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <el-pagination background layout="prev, pager, next" :total="total / 10" /> -->
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
const api = $api.dispatch.refund_ticket

export default {
  name: page.name,
  mixins: [mixins],
  data() {
    return {
      radio: '',
      formList: {
        startDate: '',
        startStationId: '',
        busNum: '',
        startTicketNum: '',
        cardId: '',
      },
      bill: '',
      checked: '',
      getList: [],
      total: '',
      height: 400,
      vehicleList: [],
      ticketInfo: {},
      stationList: [],
      single: '',
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.enterDown()
    this.getTime()
    this.getForseLect()
    this.getStation()
    this.getStart()
  },
  methods: {
    enterDown() {
      document.onkeydown = () => {
        if (window.event.keyCode == 13) {
          // 监听Enter键，按下后处理改签、退票逻辑
          this.sendData()
        }
      }
    },
    // 获取班次列表
    getForseLect() {
      api.querybusinfoforselect().then((res) => {
        this.vehicleList = res
      })
    },
    //获取默认出发车站
    getStart() {
      api.getstartstation().then((res) => {
        this.formList.startStationId = res[0].id
      })
    },
    //获取出发站点
    getStation() {
      api.stationQuery().then((res) => {
        this.stationList = res.rows
      })
    },
    checkRow(e) {
      this.selectRow = e
    },
    checkAll(e) {
      this.selectRow = e
    },
    // 退票
    sendData() {
      if (this.single != '') {
        api.refundticket({ ticketId: this.single.id, type: 1 }).then((res) => {
          this.$message({
            message: '退票成功',
            type: 'success',
          })
          this.getData()
        })
      } else {
        this.$message({
          message: '请选择一条数据',
          type: 'warning',
        })
      }
    },
    // 列表数据
    getData() {
      api.getorderinfo(this.formList).then((res) => {
        if (res.length == 0) {
          this.$message({
            message: '未查询到信息',
            type: 'warning',
          })
          this.getList = []
        } else {
          this.getList = res
        }
      })
    },
    // 点击列表某一行触发
    handleCurrentChange(data) {
      this.ticketInfo = data
    },
    // 选择一张客票
    currentRow(row) {
      this.single = row
    },
    getTime() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let isDate = y + '-' + m + '-' + d
      this.formList.startDate = isDate
    },
    getDateFun(num) {
      var d = new Date(num)
      var y = d.getFullYear()
      var m = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1
      var day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate()
      return `${y}-${m}-${day}`
    },
  },
}
</script>

<style>
.Dh_label .el-form-item__label {
  color: red;
}
.Dh_labels .el-form-item__label {
  color: blue;
}
</style>
